<!--  -->
<template>
	<a-card :bordered="false" v-if="visible">
		<div class="table-operator">
			<a-space
				><a-button type="dashed" @click="onClose">
					<template #icon><rollback-outlined /></template>返回</a-button
				>
				<a-button type="primary" @click="onSubmit"
					><template #icon><plus-outlined /></template>保存</a-button
				>
			</a-space>
		</div>
		<a-table
			style="padding-top: 10px"
			ref="table"
			:columns="columns"
			:data-source="loadData"
			:row-key="(record) => record.id"
			:loading="loading"
		>
			<template #bodyCell="{ record, column }">
				<template v-if="column.dataIndex === 'action'">
					<a-popconfirm title="确定要删除吗？" @confirm="deleteColumn(record.id)">
						<a-button type="link" danger size="small">删除</a-button>
					</a-popconfirm>
				</template>
				<template v-if="column.dataIndex === 'columnComment'">
					<a-input v-model:value="record.columnComment" placeholder="请输入字段描述" />
				</template>
				<template v-if="column.dataIndex === 'dataType'">
					<a-select style="width: 120px" v-model:value="record.dataType" @change="dataTypeChange(record, $event)">
						<a-select-option v-for="item in effectTypeOptions" :key="item.value" :value="item.value">
							{{ item.label }}
						</a-select-option>
					</a-select>
					<a-button type="link" size="small" @click="reSetColumn(record)">重置</a-button>
				</template>
				<template v-if="column.dataIndex === 'dictTypeCode'">
					<a-select
						style="width: 120px"
						v-model:value="record.dictTypeCode"
						:disabled="
							record.dataType !== 'radio_dict' &&
							record.dataType !== 'select_dict' &&
							record.dataType !== 'checkbox_dict'
						"
					>
						<a-select-option v-for="(item, index) in dictTypeCodeOptions" :key="index" :value="item.value">
							{{ item.label }}
						</a-select-option>
					</a-select>
				</template>
				<template v-if="column.dataIndex === 'status'">
					<a-switch :loading="loading" :checked="record.status === 'ENABLE'" @change="editStatus(record)" />
				</template>
			</template>
			></a-table
		>
	</a-card>
	<Form ref="formRef" @successful="table.refresh(true)" />
</template>

<script setup name="batchEditConfig">
	import { message } from 'ant-design-vue'
	import batchEditApi from '@/api/sys/batchEditApi'
	import Form from './apiForm.vue'
	import tool from '@/utils/tool'
	const emit = defineEmits({ closed: null })
	const visible = ref(false)
	const loading = ref(true)
	const formRef = ref() //表单页
	const columns = [
		{
			title: '字段名称',
			align: 'center',
			dataIndex: 'columnName'
		},
		{
			title: '字段描述',
			align: 'center',
			dataIndex: 'columnComment'
		},
		{
			title: '数据库类型',
			align: 'center',
			dataIndex: 'netType'
		},
		{
			title: '编辑类型',
			align: 'center',
			dataIndex: 'dataType'
		},
		{
			title: '字典值',
			align: 'center',
			dataIndex: 'dictTypeCode'
		},
		{
			title: '接口地址',
			align: 'center',
			dataIndex: 'requestUrl'
		},
		{
			title: '接口类型',
			align: 'center',
			dataIndex: 'requestType'
		},
		{
			title: '接口标签',
			align: 'center',
			dataIndex: 'requestLabel'
		},
		{
			title: '接口值',
			dataIndex: 'requestValue'
		},
		{
			title: '启用状态',
			dataIndex: 'status',
			align: 'center',
			width: '150px'
		}
	]

	// 类型
	const effectTypeOptions = [
		{
			label: '输入框',
			value: 'input'
		},
		{
			label: '文本框',
			value: 'textarea'
		},
		{
			label: '下拉框_字典',
			value: 'select_dict'
		},
		{
			label: '下拉框_数据',
			value: 'select_api'
		},
		{
			label: '单选框_字典',
			value: 'radio_dict'
		},
		{
			label: '单选框_数据',
			value: 'radio_api'
		},
		{
			label: '复选框_字典',
			value: 'checkbox_dict'
		},
		{
			label: '复选框_数据',
			value: 'checkbox_api'
		},
		{
			label: '日期选择器',
			value: 'datepicker'
		},
		{
			label: '时间选择器',
			value: 'timepicker'
		},
		{
			label: '开关',
			value: 'switch'
		},
		{
			label: '数字输入框',
			value: 'inputNumber'
		},
		{
			label: '滑动数字条',
			value: 'slider'
		}
	]

	// 字典数据
	const dictTypeCodeOptions = tool.dictDataAll().map((item) => {
		return {
			label: item.dictLabel,
			value: item.dictValue
		}
	})
	// 表格查询 返回 Promise 对象
	const loadData = ref([])
	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		batchEditApi.Configs({ id: record.id }).then((data) => {
			loadData.value = data
			loading.value = false
		})
	}
	//删除字段
	const deleteColumn = (id) => {
		loadData.value = loadData.value.filter((item) => item.id !== id)
	}

	//改变编辑类型
	const dataTypeChange = (record, value) => {
		record.dictTypeCode = ''
		record.dataType = value
		if (value.includes('api')) {
			formRef.value.onOpen(record)
		}
	}
	// 打开抽屉
	const onClose = () => {
		visible.value = false
		emit('closed')
	}
	// 打开抽屉
	const onSubmit = () => {
		batchEditApi.Config(loadData.value).then(() => {
			message.success('已保存')
			onClose()
		})
	}

	// 修改状态
	const editStatus = (record) => {
		console.log(record)
		if (record.status === 'ENABLE') {
			record.status = 'DISENABLE'
		} else {
			record.status = 'ENABLE'
		}
	}
	//重置
	const reSetColumn = (record) => {
		record.dictTypeCode = ''
		record.dataType = 'input'
		record.requestUrl = ''
		record.requestType = ''
		record.requestLabel = ''
		record.requestValue = ''
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>

<style lang="scss" scoped></style>
